<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { BorderBox12 as DvBorderBox12, BorderBox8 as DvBorderBox8, BorderBox6 as DvBorderBox6, BorderBox7 as DvBorderBox7, Decoration2 as DvDecoration2 } from '@kjgl77/datav-vue3'
import * as echarts from 'echarts/core'
import { GaugeChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import CustomGauge from '@/components/common/CustomGauge.vue'
import TrendChart from '@/components/common/TrendChart.vue'
import { useSensorStore } from '@/stores/sensor'

echarts.use([GaugeChart, CanvasRenderer])

const sensorStore = useSensorStore()

// 使用计算属性从 sensorStore 获取环境数据
const envData = computed(() => ({
  temperature: sensorStore.sensorData.airTemperature || 0,
  humidity: sensorStore.sensorData.airHumidity || 0,
  soilTemperature: sensorStore.sensorData.soilTemperature || 0
}))

// 基础信息数据 - 使用计算属性
const baseInfo = computed(() => ({
  id: 'F-02',
  area: '5.65',
  stage: '开花结果期',
  phValue: sensorStore.sensorData.soilPH?.toFixed(1) || '--',
  phStatus: getPHStatus(sensorStore.sensorData.soilPH)
}))

// 土壤监测数据 - 使用计算属性
const soilData = computed(() => [
  { 
    value: sensorStore.sensorData.soilNitrogen?.toFixed(1) || '--', 
    unit: 'MG/KG', 
    label: '土壤含氮量', 
    status: getNutrientStatus(sensorStore.sensorData.soilNitrogen)
  },
  { 
    value: sensorStore.sensorData.soilPhosphorus?.toFixed(1) || '--', 
    unit: 'MG/KG', 
    label: '土壤含磷量', 
    status: getNutrientStatus(sensorStore.sensorData.soilPhosphorus)
  },
  { 
    value: sensorStore.sensorData.soilPotassium?.toFixed(1) || '--', 
    unit: 'MG/KG', 
    label: '土壤含钾量', 
    status: getNutrientStatus(sensorStore.sensorData.soilPotassium)
  }
])

// 状态判断函数
function getPHStatus(value?: number) {
  if (value === undefined) return '--'
  const numValue = Number(value)
  if (numValue < 5.5) return '酸'
  if (numValue > 7.5) return '碱'
  return '良'
}

function getNutrientStatus(value?: number) {
  if (value === undefined) return '--'
  const numValue = Number(value)
  if (numValue < 10) return '低'
  if (numValue > 30) return '高'
  return '良'
}

function getTemperatureStatus(value?: number) {
  if (value === undefined) return '--'
  const numValue = Number(value)
  if (numValue < 15) return '低'
  if (numValue > 30) return '高'
  return '良'
}

function getHumidityStatus(value?: number) {
  if (value === undefined) return '--'
  const numValue = Number(value)
  if (numValue < 40) return '低'
  if (numValue > 80) return '高'
  return '良'
}

const handleRefresh = async () => {
  await sensorStore.fetchLatestData()
  await sensorStore.fetchWeekData()
}
</script>

<template>
  <div class="left-panel" v-loading="sensorStore.loading">
    <DvBorderBox9 class="quality-box">
      <!-- 标题和基础信息 -->
      <div class="header">
        <dv-decoration3 class="decoration" />
        <h3 class="title">智慧大棚土壤质量实时监测</h3>
        <dv-decoration3 class="decoration" />
      </div>
      <div class="info-grid">
        <dv-border-box2 class="info-border" :color="['#4ED0DC', '#4ED0DC']">
          <div class="info-item">
            <span class="label">智慧大棚编号</span>
            <span class="value">{{ baseInfo.id }}</span>
          </div>
        </dv-border-box2>
        <dv-border-box2 class="info-border" :color="['#4ED0DC', '#4ED0DC']">
          <div class="info-item">
            <span class="label">占地面积</span>
            <span class="value">{{ baseInfo.area }} 亩</span>
          </div>
        </dv-border-box2>
        <dv-border-box2 class="info-border" :color="['#4ED0DC', '#4ED0DC']">
          <div class="info-item">
            <span class="label">生长阶段</span>
            <span class="value">{{ baseInfo.stage }}</span>
          </div>
        </dv-border-box2>
        <dv-border-box2 class="info-border" :color="['#4ED0DC', '#4ED0DC']">
          <div class="info-item">
            <span class="label">土壤PH值</span>
            <div class="value-box">
              <span class="value">{{ baseInfo.phValue }}</span>
              <span class="status">{{ baseInfo.phStatus }}</span>
            </div>
          </div>
        </dv-border-box2>
      </div>

      <!-- 土壤监测数据 -->
      <div class="soil-grid">
        <DvBorderBox8 :dur="5" v-for="(item, index) in soilData" :key="index" class="soil-box">
          <div class="soil-content">
            <div class="soil-main">
              <span class="soil-value">{{ item.value }}</span>
              <span class="soil-unit">{{ item.unit }}</span>
              <span class="soil-status">{{ item.status }}</span>
            </div>
            <div class="soil-label">{{ item.label }}</div>
          </div>
        </DvBorderBox8>
      </div>
    </DvBorderBox9>
    
    <DvBorderBox9 class="env-box">
      <div class="header">
        <dv-decoration3 class="decoration" />
        <h3 class="title">智慧大棚实时环境监测</h3>
        <dv-decoration3 class="decoration" />
      </div>
      
      <!-- 环境监测 -->
      <div class="gauge-wrapper">
        <div class="gauge-item">
          <dv-border-box8 :dur="5">
            <CustomGauge
              :width="280"
              :height="220"
              :value="envData.temperature"
              :min="0"
              :max="50"
              :radius="85"
              :centerY="45"
              :pointerLength="50"
              :fontSize="11"
              :detailFontSize="24"
              unit="°C"
              title="空气温度"
            >
              <template #default="{ value, unit }">
                <div class="gauge-text-wrapper">
                  <span class="gauge-value-text">{{ value }}{{ unit }}</span>
                  <span class="gauge-title">空气温度</span>
                </div>
              </template>
            </CustomGauge>
          </dv-border-box8>
        </div>
        <div class="gauge-item">
          <dv-border-box8 :dur="5">
            <CustomGauge
              :width="280"
              :height="220"
              :value="envData.humidity"
              :min="0"
              :max="100"
              :radius="85"
              :centerY="45"
              :pointerLength="50"
              :fontSize="11"
              :detailFontSize="24"
              unit="%"
              title="空气湿度"
            >
              <template #default="{ value, unit }">
                <div class="gauge-text-wrapper">
                  <span class="gauge-value-text">{{ value }}{{ unit }}</span>
                  <span class="gauge-title">空气湿度</span>
                </div>
              </template>
            </CustomGauge>
          </dv-border-box8>
        </div>
      </div>
    </DvBorderBox9>

    <DvBorderBox9 class="trend-box">
      <div class="header">
        <dv-decoration3 class="decoration" />
        <h3 class="title">环境监测数据统计</h3>
        <dv-decoration3 class="decoration" />
      </div>
      <div class="trend-wrapper">
        <TrendChart />
      </div>
    </DvBorderBox9>
  </div>
</template>

<style scoped>
.left-panel {
  width: 640px;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.quality-box {
  width: 100%;
  height: 350px;
  padding: 20px;
  background: rgba(0, 24, 48, 0.6);
}

.env-box {
  width: 100%;
  height: 350px;
  padding: 20px;
  background: rgba(0, 24, 48, 0.6);
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.decoration {
  width: 160px;
  height: 20px;
}

.title {
  color: #d9faff;
  font-size: 20px;
  font-weight: bold;
}

.info-grid {
  height: 150px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 15px;
}

.info-border {
  height: 65px;
  width: 100%;
}

.info-item {
  display: flex;
  justify-content: space-between; /* 两端对齐 */
  align-items: center;
  padding: 15px; /* 增加内边距 */
  border-radius: 8px; /* 圆角边框 */
  height: 60px;
  
}

.value-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.label {
  color: #ffc93c;
  font-size: 18px;
  font-weight: bold;
}

.value {
  font-size: 22px;
  color: #d9faff; /* 字颜色 */
}

.status {
  color: #4fd2dd;
  font-size: 14px;
  background-color: #004a7c;
  border-radius: 5px;
  padding: 2px 5px;
}

.soil-grid {
  height: 100px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 0 20px;
  margin-top: 10px;
}

.soil-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.soil-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 10px;
}

.soil-value {
  color: #d9faff;
  font-size: 32px;
}

.soil-unit {
  color: #4fd2dd;
  font-size: 14px;
}

.soil-status {
  color: #4fd2dd;
  font-size: 14px;
  background-color: #004a7c;
  border-radius: 5px;
  padding: 0 5px;
  
}

.soil-label {
  color: #ffc93c;
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}

.gauge-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
  height: calc(100% - 60px);
}

.gauge-title {
  font-size: 18px;
  color: #ffc93c;
  font-weight: bold;
}

.gauge-item {
  width: 300px;  /* 稍微增加宽度以适应边框 */
  height: 260px; /* 稍微增加高度以适应边框 */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;  /* 添加内边距 */
}

.gauge-text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: -20px;
}

.gauge-value-text {
  font-size: 24px;
  color: #d9faff;
  font-weight: bold;
  margin-bottom: 5px;
}

.gauge-title {
  font-size: 18px;
  color: #ffc93c;
  font-weight: bold;
}

.trend-box {
  width: 100%;
  height: 350px;
  padding: 20px;
  background: rgba(0, 24, 48, 0.6);
}

.trend-wrapper {
  width: 550px;
  height: 250px;
  padding: 10px;
}

/* 添加边框内容区域的样式 */
.trend-wrapper :deep(.dv-border-box-content) {
  padding: 10px;
}

.sensor-box {
  width: 100%;
  height: 300px;
  padding: 20px;
  background: rgba(0, 24, 48, 0.6);
}

.sensor-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
}

.sensor-title span {
  color: #00e4ff;
  font-size: 20px;
  font-weight: bold;
}

.sensor-content {
  height: calc(100% - 55px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading, .error {
  color: #00e4ff;
  font-size: 16px;
  text-align: center;
}

.error {
  color: #ff4d4f;
}

.sensor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
  padding: 10px;
}

.sensor-item {
  background: rgba(0, 228, 255, 0.1);
  border: 1px solid #00e4ff;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
}

.sensor-label {
  color: #00e4ff;
  font-size: 16px;
  margin-bottom: 10px;
}

.sensor-value {
  color: #fff;
  font-size: 24px;
  font-weight: bold;
}

.gauge-status {
  color: #4fd2dd;
  font-size: 14px;
  background-color: #004a7c;
  border-radius: 5px;
  padding: 2px 5px;
  margin-top: 5px;
}

/* 添加以下全局样式 */
:deep(.el-loading-mask) {
  background-color: rgba(0, 24, 48, 0.6) !important;
}

:deep(.el-loading-spinner .path) {
  stroke: #00e4ff;
}

:deep(.el-loading-spinner .el-loading-text) {
  color: #00e4ff;
}

</style>
